<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
    <meta name="viewport"
          content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <script src="js/jquery-3.1.0.min.js"></script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            overflow-y: scroll;
            overflow-x: hidden;
        }
        ul,li{
            list-style-type: none;
        }
        a{
            text-decoration: none;
        }
        #slideBox{
            position: relative;max-width: 200px;/*overflow: hidden;*/
        }

        #slideBox .bd{
            position:absolute;
            left: 0;
            top: 0;
        }
       /* #slideBox .bd img{
            display: block;
            float: left;
             width: 100%;
            vertical-align:top;
        }*/
       .ss{
           max-width: 768px;
           margin: 100px auto;
           position: relative;
           overflow: hidden;
           transition: all ease 1.0s;
       }

      .inner{
          width: 400%;
          position: relative;
          transition: all ease 1.0s;
       }
        img{
            width: 25%;
            float: left;
            transition: all ease 1.0s;
        }
        .selected{
            background: gray;
            color: black;
        }
        #paganation{
            position: absolute;
            bottom: 8%;
            right: 10%;
        }
        #paganation span{
            width: 15px;
            height: 15px;
            border-radius: 50%;
            color: white;
            background: forestgreen;
        }
    </style>
</head>
<body>

<div class="ss" id="slider">
    <div class="inner"id="inner">
    <img src="img/sl3.jpg" class="img1"/>
    <img src="img/sl4.jpg" class="img2"/>
    <img src="img/sl2.jpg"class="img3"/>
    <img src="img/sl1.jpg"class="img4"/>
    </div>
    <div class="paganation" id="paganation"><!‐‐ 页面按钮区域 ‐‐>
        <span class ="selected">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</div>

<script type="text/javascript">
   $(function () {
        var index=0;
       var title=$("#paganation span");
       var timer = setInterval(autorun,3000);
       var width=$("#slider").width();
    function slider(){
       console.log(width);
        $(window).resize(function(){
            width=$("#slider").width();
            $('#inner').css("left",width*index*(-1)+"px");
        });
         $(title).removeClass();
         $(title[index]).addClass("selected");
        $('#inner').css("left",width*index*(-1)+"px");
    }
   function autorun(){
       if(index == title.length){
           index = 0;
       }
       slider();
       index++;
   }


   })
</script>



<!--
<div id="slideBox" class="slideBox">
    <div class="bd">
        <img src="img/sl3.jpg" />
        <img src="img/sl4.jpg"/>
        <img src="img/sl2.jpg"/>
        <img src="img/sl1.jpg"/>

    </div>
    <div class="hd">
        <ul></ul>
    </div>

</div>-->




</body>
</html>